<template>
	<view class="container">
		<cu-header bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content" class="page-name">售后详情</block>
		</cu-header>
		<view class="contents">
			<view class="bg-gradual-blue flex justify-between padding-sm padding-lr" @click="onSeletAddress">
				<view>
					<view class="text-size-34">超时关闭</view>
					<view>交易关闭</view>
				</view>
				<view class="cuIcon-shopfill size-84"></view>
			</view>
			<view class="bg-white  radius flex justify-center align-center padding-sm">
				<view class="cuIcon-location size-84 text-red"></view>
				<view class="margin-left-sm">
					<view>
						<text class="text-black text-size-32 text-blod">孙秋龙</text>
						<text class="text-gray text-size-16 margin-left-sm">18716643045</text>
					</view>
					<view>
						湖南省岳麓区丰顺路卫生院13东123号
					</view>
				</view>
				<view class="cuIcon-right size-36 margin-left-sm"></view>
			</view>
			<view class="cu-card article">
				<view class="cu-item shadow">
					<view class="title flex justify-between">
						<view class="align-center">
							<text class="cuIcon-shop size-44"></text>
							<text class="text-size-32 margin-left-sm">很爱旗舰店</text>
							<text class="cuIcon-right size-36"></text>
						</view>
						<view></view>
					</view>
					<cu-list-goods :datas="goods"></cu-list-goods>
					<view class="flex justify-end">
						<button class="cu-btn round lines-gray margin-right-sm">退款</button>
					</view>
					<view class="flex justify-between padding-lr padding-top-xs padding-bottom-xs">
						<view>商品总价</view>
						<view>￥123.00</view>
					</view>
					<view class="flex justify-between padding-lr padding-top-xs padding-bottom-xs">
						<view>运费</view>
						<view>￥0.00</view>
					</view>
					<view class="flex justify-end padding-right">
						<view>
							<text class="text-black text-bold ">实付款</text>
							<text class="text-red text-bold margin-left-xs">￥123.00</text>
						</view>
					</view>
				</view>
				<view class="cu-item shadow">
					<view class="title">
						订单信息
					</view>

					<view class="flex justify-between padding-lr padding-top-xs padding-bottom-xs">
						<view>订单编号</view>
						<view>3432435634543</view>
					</view>
					<view class="flex justify-between padding-lr padding-top-xs padding-bottom-xs">
						<view>物流单号</view>
						<view>3432435634543</view>
					</view>
					<view class="flex justify-between padding-lr padding-top-xs padding-bottom-xs">
						<view>创建时间</view>
						<view>2021-5-15</view>
					</view>
					<view class="flex justify-between padding-lr padding-top-xs padding-bottom-xs">
						<view>付款时间</view>
						<view>2021-5-15</view>
					</view>
					<view class="flex  solid-top">
						<view class="flex-sub text-center solid-right padding-sm">联系买家</view>
						<view class="flex-sub text-center padding-sm">拨打电话</view>
					</view>
					<view class="flex  justify-end padding-sm solid-top">
						
						<button class="cu-btn round line-gray margin-right">删除订单</button>
					</view>
				</view>
			</view>
			<view class="text-center padding-sm">
				<text class="text-size-32 text-red text-blod">推荐商品</text>
			</view>
			<cu-grid-media cols="2" :datas="lists"></cu-grid-media>
			<cu-more title="已没有更多内容咯"></cu-more>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import cuListGoods from '@/components/diy/list/cu-list-goods.vue'
	import cuGridMedia from '@/components/diy/list/cu-grid-media.vue';
	export default {
		computed: {
			...mapState(['hasLogin', 'forcedLogin', 'userinfo'])
		},
		components: {
			cuListGoods,
			cuGridMedia
		},
		data() {
			return {
				goods: [{
						name: "时尚运动鞋",
						price: 150,
						number: 2,
						image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg'
					},
					{
						name: "运动套装",
						price: 280,
						number: 2,
						image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg'
					}
				],
				lists: [{
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wfjianmei.com%2Fupload_files%2Ftk28851741.jpg&refer=http%3A%2F%2Fwww.wfjianmei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623389167&t=0adc70d635be9180d371ab5620979c68",
						name: "电脑椅排行",
						info: "月销12.6万件"
					},
					{
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wfjianmei.com%2Fupload_files%2Ftk28851741.jpg&refer=http%3A%2F%2Fwww.wfjianmei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623389167&t=0adc70d635be9180d371ab5620979c68",
						name: "电脑椅排行",
						info: "月销12.6万件"
					},
					{
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wfjianmei.com%2Fupload_files%2Ftk28851741.jpg&refer=http%3A%2F%2Fwww.wfjianmei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623389167&t=0adc70d635be9180d371ab5620979c68",
						name: "电脑椅排行",
						info: "月销12.6万件"
					}, {
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wfjianmei.com%2Fupload_files%2Ftk28851741.jpg&refer=http%3A%2F%2Fwww.wfjianmei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623389167&t=0adc70d635be9180d371ab5620979c68",
						name: "电脑椅排行",
						info: "月销12.6万件"
					},
					{
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wfjianmei.com%2Fupload_files%2Ftk28851741.jpg&refer=http%3A%2F%2Fwww.wfjianmei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623389167&t=0adc70d635be9180d371ab5620979c68",
						name: "电脑椅排行",
						info: "月销12.6万件"
					}, {
						image: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wfjianmei.com%2Fupload_files%2Ftk28851741.jpg&refer=http%3A%2F%2Fwww.wfjianmei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623389167&t=0adc70d635be9180d371ab5620979c68",
						name: "电脑椅排行",
						info: "月销12.6万件"
					}
				]
			};
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return this.shareinfo;
		},
		onLoad() {},
		onShow() {

		},
		methods: {
			...mapMutations([]),
			onSeletAddress: function() {
				this.$util.redirectTo('/pages/shop/address/index')

			}

		}
	};
</script>

<style scoped></style>
